<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>管理系统</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    /* 导航栏样式 */
    nav {
      background-color: #333;
      color: white;
      padding: 10px 0;
      text-align: center;
    }

    nav a {
      color: white;
      margin: 0 15px;
      text-decoration: none;
      font-size: 18px;
    }

    nav a:hover {
      text-decoration: underline;
    }

    /* 主体内容区域 */
    .content {
      padding: 20px;
    }

    /* 列表样式 */
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }

    table, th, td {
      border: 1px solid #ddd;
    }

    th, td {
      padding: 12px;
      text-align: left;
    }

    th {
      background-color: #f2f2f2;
    }

    .container {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
    }

    .container > div {
      width: 48%;
    }

    .btn {
      padding: 5px 10px;
      margin: 0 5px;
      cursor: pointer;
      border: none;
      border-radius: 5px;
    }

    .btn-edit {
      background-color: #4CAF50;
      color: white;
    }

    .btn-delete {
      background-color: #f44336;
      color: white;
    }

    .btn:hover {
      opacity: 0.8;
    }
  </style>
</head>
<body>

<!-- 导航栏 -->
<nav>
  <a href="javascript:void(0)" onclick="showContent('user')">用户管理</a>
  <a href="javascript:void(0)" onclick="showContent('employee')">员工管理</a>
</nav>

<!-- 内容区 -->
<div class="content" id="contentArea">
  <!-- 用户管理区域 -->
  <div id="user" style="display:block;">
    <h2>用户列表</h2>
    <!-- 新增按钮 -->
    <button class="btn btn-edit" onclick="addUser()">新增用户</button>
    <table>
      <tr>
        <th>
          id
        </th>
        <th>用户名</th>
        <th>权限</th>
        <th>操作</th>
      </tr>
      <!-- 使用 JSTL 循环展示用户数据 -->
      <c:forEach var="user" items="${userList.content}">
        <tr>
<%--          <td>${user.pageSize}</td>--%>
          <td>${user.userId}</td>
          <td>${user.username}</td>
          <td>${user.role}</td>
          <td>
            <button class="btn btn-edit" onclick="editUser('${user.userId}')">修改</button>
            <button class="btn btn-delete" onclick="deleteUser('${user.userId}')">删除</button>
          </td>
        </tr>
      </c:forEach>
    </table>
    <!-- 分页按钮 -->
    <div class="pagination">
      <c:if test="${userList.currentPage > 1}">
        <a href="user?action=list&pageNumber=${userList.currentPage - 1}&pageSize=${userList.pageSize}">上一页</a>
      </c:if>

      <span>第 ${userList.currentPage} 页 / 共 ${userList.totalPages} 页</span>

      <c:if test="${employeeList.currentPage < employeeList.totalPages}">
        <a href="user?action=list&pageNumber=${employeeList.currentPage + 1}&pageSize=${employeeList.pageSize}">下一页</a>
      </c:if>
  </div>
  </div>
</div>

<script>
  // 切换内容区域显示
  function showContent(type) {
    // 根据点击的类型显示相应的内容
    if (type === 'user') {
      document.getElementById('user').style.display = 'block';
      window.location.href = '/user?action=list&pageNumber=1&pageSize=10'
    } else if (type === 'employee') {
      window.location.href ='/employee?action=list&pageNumber=1&pageSize=10'
    }
  }

  // 用户管理修改按钮点击事件
  function editUser(id) {
    alert('修改用户: ' + id);
    window.location.href = '/user?action=getById&id='+id
  }

  // 用户管理删除按钮点击事件
  function deleteUser(id) {
    if (confirm('确定要删除用户 ' + id + ' 吗？')) {
      alert('删除用户: ' + id);
      // 实际删除操作可以通过 AJAX 进行
      window.location.href = '/user?action=delete&id='+id

    }
  }

  // 员工管理修改按钮点击事件
  function editEmployee(employeeName) {
    alert('修改员工: ' + employeeName);
    // 可以跳转到员工编辑页面或弹出修改框
  }

  // 员工管理删除按钮点击事件
  function deleteEmployee(employeeName) {
    if (confirm('确定要删除员工 ' + employeeName + ' 吗？')) {
      alert('删除员工: ' + employeeName);
      // 实际删除操作可以通过 AJAX 进行
    }
  }
  function addEmployee() {
    window.location.href = '/employee?action=ls'
  }
  function addUser() {
    window.location.href = '/addUser.jsp'
    // 实际的新增操作可以跳转到新增员工的表单页，或者弹出一个输入框供用户填写员工信息
  }
</script>

</body>
</html>
